<template>
	<view class="searchWrap">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel" @clear="clear">
		</uni-search-bar>
		<template v-if="searchResultList.length==0">
			<view v-if="lateSearchItems.length!=0" class="late_search">
				<uni-card :is-shadow="false" is-full>
					<view class="title_bar">
						<view class="title">
							最近搜索
						</view>
						<view @click="clearLateSearch" class="icon">
							<uni-icons type="trash" size="30"></uni-icons>

						</view>
					</view>
					<view class="items-wrap">
						<template  v-for="(item,index) in lateSearchItems">
							<view @click="selectItem(item)" v-if="index<=9"  class="item">
								{{item}}
							</view>
						</template>
					
					</view>
				</uni-card>
			</view>


			<view class="late_search">
				<uni-card :is-shadow="false" is-full>
					<view class="title_bar">
						<view class="title">
							热门搜索
						</view>

					</view>
					<view class="items-wrap">
						<view @click="selectItem(item)" v-for="item in hotSearchItems" class="item">
							{{item}}
						</view>
					</view>
				</uni-card>
			</view>
		</template>

		<view class="search-result-wrap" v-if="searchResultList.length">
		<navigator :key="item._id"   v-for="item in searchResultList" :url="`/pages/preview/preview?id=${item._id}`" class="item">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
			
			<view v-if="isShowMoreTop" class="safe-area-inset-bottom">
				<uni-load-more status="more"  ></uni-load-more>

			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';
import { IClassifyList } from '../../api/type';
import { apiSearchWallPaper } from '../../api/apis';
import { onReachBottom } from "@dcloudio/uni-app"
	let searchValue = ref('')
	let lateSearchItems = ref(uni.getStorageSync('lateSearchItems') || [])
	let hotSearchItems = ref(['第一项', '第二项', '第三项', '第二项', '第三项', '第二项', '第三项', '第二项', '第三项', '第二项', '第三项', '第二项', '第三项'])
	let searchResultList = ref<IClassifyList[]>([])
	let isShowMoreTop = ref(true)
	let pageThings={
		pageNum:1,
		pageSize:12
	}
	
	onReachBottom(()=>{
		console.log(1);
		pageThings.pageNum = pageThings.pageNum+1;
		apiSearch()
	})
	
	function search() {
		if(searchValue.value.trim()=='') return
		searchResultList.value=[];
		lateSearchItems.value = [...new Set([searchValue.value, ...lateSearchItems.value])]
		uni.setStorageSync('lateSearchItems', lateSearchItems.value)
		apiSearch();
		
	}

	function clearLateSearch() {
		uni.removeStorageSync('lateSearchItems')
		lateSearchItems.value = []
	}

	function selectItem(value) {
		searchValue.value = value;
		search()
	}
	async function apiSearch(){
		uni.showLoading({
			title:'加载中'
		})
		try {
			let result = await apiSearchWallPaper({...pageThings,keyword:searchValue.value});
			if(result.length<12) isShowMoreTop.value = false;
			searchResultList.value = [...result,...searchResultList.value]
			uni.hideLoading();
			console.log(result);
			
		} catch (error) {
			//TODO handle the exception
			console.log(error);
		}
	}
	function cancel() {
		console.log(11);
		searchResultList.value=[];
	}
	function clear() { }
	
	function initPage(){
		pageThings ={
			pageNum:1,
			pageSize:12
		}
	}
</script>

<style lang="scss" scoped>
	.searchWrap {
		.late_search {
			margin-top: 35rpx;

			.title_bar {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 30rpx;
					color: #000;
				}
			}
		}

		.items-wrap {
			margin-top: 25rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;

			.item {
				background-color: #eee;
				padding: 0 15rpx;
				border-radius: 15rpx;
			}

		}


		.search-result-wrap {
			padding: 5rpx;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;

			.item {
				width: 100%;
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

		}
	}
</style>